<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box1{
            width: 300px;
            height: 200px;
            background-color: salmon;
            user-select: none;
        }
        #box2{
            width: 200px;
            height: 100px;
            background-color: skyblue;
            user-select: none;
        }
    </style>
</head>
<body>
<div id="box1">
    box1
    <div id="box2">
        box2
    </div>
</div>
<script>
    let box1 =document.getElementById('box1')
    let box2 =document.getElementById('box2')
    box1.onmouseout=function (event){
        console.log("移出box1")
        event.stopPropagation()
    }
    box2.onmouseout=function (event){
        console.log("移出box2")
        event.stopPropagation()
    }
    box1.onmouseleave=function (){
        console.log("leave box1")
    }
    box2.onclick=function (event){
        console.log("点击 box2")
    }
    box1.onclick=function (event){
        console.log("点击 box1")
    }
</script>
</body>
</html>
